<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>App用户行为数据分析</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>

<div id="daapp">
    <el-row>
        <el-col :span="24" style="text-align:center;">
            <div class="grid-content bg-purple-dark">
                <el-date-picker
                        v-model="yuevalue1"
                        size="small"
                        type="month"
                        placeholder="选择月"
                        @change="changedate1">
                </el-date-picker>
                <el-select v-model="value" size="small" placeholder="请选择" @change="changedate3">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="value2" size="small" placeholder="请选择" @change="changedate5">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main" class="chart-container"
                     style="width:99%; height:95vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="text-align:center;">
            <div class="grid-content bg-purple-dark">
                <el-date-picker
                        v-model="nianvalue1"
                        size="small"
                        type="year"
                        placeholder="选择年"
                        @change="changedate2">
                </el-date-picker>
                <el-select v-model="value1" size="small" placeholder="请选择" @change="changedate4">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="value3" size="small" placeholder="请选择" @change="changedate6">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main1" class="chart-container"
                     style="width:99%; height:95vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">

            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">

            </div>
        </el-col>
    </el-row>

</div>
<script>
    new Vue({
        data() {
            return {
                yuevalue1: "{{ year }}-{{ month }}",
                nianvalue1: "{{ year }}",
                options: [{
                    value: 'mean',
                    label: '均值'
                }, {
                    value: 'sum',
                    label: '求和'
                }, {
                    value: 'std',
                    label: '标准差'
                }, {
                    value: 'var',
                    label: '方差'
                }, {
                    value: 'sem',
                    label: '均值标准误'
                }],
                options1: [{
                    value: 'qidongcishu',
                    label: '启动次数'
                }, {
                    value: 'pingjunshiyongshichang',
                    label: '平均使用时长'
                }],
                value: 'mean',
                value1: 'mean',
                value2: 'qidongcishu',
                value3: 'qidongcishu',
            }
        },
        mounted() {
            this.huoqushuju("{{ year }}", "{{ month }}", this.value, this.value2);
            this.huoqushuju1("{{ year }}", this.value1, this.value3);
        },
        methods: {
            changedate1(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju(new Date(data).getFullYear(), (new Date(data).getMonth() + 1), this.value, this.value2);
            }, changedate2(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju1(new Date(data).getFullYear(), this.value1, this.value3);
            }, changedate3(value) {
                this.huoqushuju(new Date(this.yuevalue1).getFullYear(), (new Date(this.yuevalue1).getMonth() + 1), value, this.value2);
            }, changedate4(value) {
                this.huoqushuju1(new Date(this.nianvalue1).getFullYear(), value, this.value3);
            }, changedate5(value) {
                this.huoqushuju(new Date(this.yuevalue1).getFullYear(), (new Date(this.yuevalue1).getMonth() + 1), this.value, value);
            }, changedate6(value) {
                this.huoqushuju1(new Date(this.nianvalue1).getFullYear(), this.value1, value);
            }, huoqushuju(dater1, dater2, value17, value15) {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yuediyufenbu&year=" + dater1 + "&month=" + dater2 + "&shuming=" + value17 + "&leiming=" + value15,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        $.get('https://geo.datav.aliyun.com/areas/bound/100000_full.json', function (CHINAJson) {
                            echarts.registerMap('中国地图', CHINAJson);
                            option = {
                                title: {
                                    text: '地域分布-年月',
                                },
                                toolbox: {
                                    right: 50,
                                    feature: {
                                        myFull: {
                                            show: true,
                                            title: '全屏',
                                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                            onclick: (e) => {
                                                // 全屏查看
                                                if (chartDom.requestFullScreen) { // HTML W3C 提议
                                                    chartDom.requestFullScreen()
                                                } else if (chartDom.msRequestFullscreen) { // IE11
                                                    chartDom.msRequestFullScreen()
                                                } else if (chartDom.webkitRequestFullScreen) { // Webkit
                                                    chartDom.webkitRequestFullScreen()
                                                } else if (chartDom.mozRequestFullScreen) { // Firefox
                                                    chartDom.mozRequestFullScreen()
                                                }
                                                // 退出全屏
                                                if (chartDom.requestFullScreen) {
                                                    document.exitFullscreen()
                                                } else if (chartDom.msRequestFullScreen) {
                                                    document.msExitFullscreen()
                                                } else if (chartDom.webkitRequestFullScreen) {
                                                    document.webkitCancelFullScreen()
                                                } else if (chartDom.mozRequestFullScreen) {
                                                    document.mozCancelFullScreen()
                                                }
                                                window.onresize = function () {
                                                    myChart.resize()
                                                }
                                            }
                                        }
                                    }
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                visualMap: {
                                    min: datat.data.min,
                                    max: datat.data.max,
                                    text: ['高', '低'],
                                    realtime: false,
                                    calculable: true,
                                    inRange: {
                                        color: ['lightskyblue', 'yellow', 'orangered']
                                    }
                                },
                                series: [
                                    {
                                        name: '启动平均次数',
                                        type: 'map',
                                        map: '中国地图',
                                        label: {
                                            show: true
                                        },
                                        nameMap: {
                                            '北京市': '北京',
                                            '天津市': '天津',
                                            '上海市': '上海',
                                            '重庆市': '重庆',
                                            '河北省': '河北',
                                            '河南省': '河南',
                                            '云南省': '云南',
                                            '辽宁省': '辽宁',
                                            '黑龙江省': '黑龙江',
                                            '湖南省': '湖南',
                                            '安徽省': '安徽',
                                            '山东省': '山东',
                                            '新疆维吾尔自治区': '新疆',
                                            '江苏省': '江苏',
                                            '浙江省': '浙江',
                                            '江西省': '江西',
                                            '湖北省': '湖北',
                                            '广西壮族自治区': '广西',
                                            '甘肃省': '甘肃',
                                            '山西省': '山西',
                                            '内蒙古自治区': '内蒙古',
                                            '陕西省': '陕西',
                                            '吉林省': '吉林',
                                            '福建省': '福建',
                                            '贵州省': '贵州',
                                            '广东省': '广东',
                                            '青海省': '青海',
                                            '西藏自治区': '西藏',
                                            '四川省': '四川',
                                            '宁夏回族自治区': '宁夏',
                                            '海南省': '海南',
                                            '台湾省': '台湾',
                                            '香港特别行政区': '香港',
                                            '澳门特别行政区': '澳门'
                                        },
                                        data: datat.data.shuju,
                                    }
                                ]
                            };
                            option && myChart.setOption(option, true);
                        });
                    }
                });
            }, huoqushuju1(dater1, value18, value19) {
                var chartDom1 = document.getElementById('main1');
                var myChart1 = echarts.init(chartDom1);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=niandiyufenbu&year=" + dater1 + "&shuming=" + value18 + "&leiming=" + value19,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        $.get('https://geo.datav.aliyun.com/areas/bound/100000_full.json', function (CHINAJson) {
                            echarts.registerMap('中国地图', CHINAJson);
                            option = {
                                title: {
                                    text: '地域分布-年',
                                },
                                toolbox: {
                                    right: 50,
                                    feature: {
                                        myFull: {
                                            show: true,
                                            title: '全屏',
                                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                            onclick: (e) => {
                                                // 全屏查看
                                                if (chartDom1.requestFullScreen) { // HTML W3C 提议
                                                    chartDom1.requestFullScreen()
                                                } else if (chartDom1.msRequestFullscreen) { // IE11
                                                    chartDom1.msRequestFullScreen()
                                                } else if (chartDom1.webkitRequestFullScreen) { // Webkit
                                                    chartDom1.webkitRequestFullScreen()
                                                } else if (chartDom.mozRequestFullScreen) { // Firefox
                                                    chartDom1.mozRequestFullScreen()
                                                }
                                                // 退出全屏
                                                if (chartDom1.requestFullScreen) {
                                                    document.exitFullscreen()
                                                } else if (chartDom1.msRequestFullScreen) {
                                                    document.msExitFullscreen()
                                                } else if (chartDom1.webkitRequestFullScreen) {
                                                    document.webkitCancelFullScreen()
                                                } else if (chartDom1.mozRequestFullScreen) {
                                                    document.mozCancelFullScreen()
                                                }
                                                window.onresize = function () {
                                                    myChart1.resize()
                                                }
                                            }
                                        }
                                    }
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                visualMap: {
                                    min: datat.data.min,
                                    max: datat.data.max,
                                    text: ['高', '低'],
                                    realtime: false,
                                    calculable: true,
                                    inRange: {
                                        color: ['lightskyblue', 'yellow', 'orangered']
                                    }
                                },
                                series: [
                                    {
                                        name: '启动平均次数',
                                        type: 'map',
                                        map: '中国地图',
                                        label: {
                                            show: true
                                        },
                                        nameMap: {
                                            '北京市': '北京',
                                            '天津市': '天津',
                                            '上海市': '上海',
                                            '重庆市': '重庆',
                                            '河北省': '河北',
                                            '河南省': '河南',
                                            '云南省': '云南',
                                            '辽宁省': '辽宁',
                                            '黑龙江省': '黑龙江',
                                            '湖南省': '湖南',
                                            '安徽省': '安徽',
                                            '山东省': '山东',
                                            '新疆维吾尔自治区': '新疆',
                                            '江苏省': '江苏',
                                            '浙江省': '浙江',
                                            '江西省': '江西',
                                            '湖北省': '湖北',
                                            '广西壮族自治区': '广西',
                                            '甘肃省': '甘肃',
                                            '山西省': '山西',
                                            '内蒙古自治区': '内蒙古',
                                            '陕西省': '陕西',
                                            '吉林省': '吉林',
                                            '福建省': '福建',
                                            '贵州省': '贵州',
                                            '广东省': '广东',
                                            '青海省': '青海',
                                            '西藏自治区': '西藏',
                                            '四川省': '四川',
                                            '宁夏回族自治区': '宁夏',
                                            '海南省': '海南',
                                            '台湾省': '台湾',
                                            '香港特别行政区': '香港',
                                            '澳门特别行政区': '澳门'
                                        },
                                        data: datat.data.shuju,
                                    }
                                ]
                            };
                            option && myChart1.setOption(option, true);
                        });
                    }
                });
            },
        }
    }).$mount('#daapp')
</script>

</body>

</html>